<template>
  <div>
    <Card v-if='isbodyList'>
      <div class="p-relative">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item search-btn">
            <Button type="primary" @click="createProd()">添加</Button>
          </div>
          <div class="flex-item">
            <Input v-model="searchObj.name" placeholder="请输入产品名称"></Input>
          </div>
          <div class="flex-item search-btn" @click="search">
            <Button type="primary">搜索</Button>
          </div>
          <div class="flex-item search-btn" @click="reset">
            <Button>重置</Button>
          </div>
           <div class="flex-item search-btn" @click="createUserQr">
            <Button>创建用户上课二维码</Button>
          </div>

        </div>
      </div>
      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">
        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">
           <!--  <div  @click="makeQR(row, index)" class="iconfont qr-btn" style="font-size:30px;color:#2d8cf0;">
              &#xe6ba;
            </div> -->
            <!-- <Button type='primary' @click="audit(row, index)" size='small' v-if="row.audit!=2">审核</Button>
            <Button type='primary' @click="prodList(row, index)" size='small'>分配</Button> -->
             <Button type='primary' @click="edit(row, index)" size='small'>修改</Button>
            <Button type='error' @click="del(row, index)" size='small'>删除</Button>

            <Button  v-if="row.sale_estate" type='success' size='small'>销售中</Button>
            <Button  v-else type='error' size='small'>已结束</Button>

          </div>
        </template>
      </Table>

      <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>
    </Card>
    <!-- 添加修改 -->
    <Card v-else>
      <Tabs type="card">
        <TabPane label="基本信息">
          <BaseInfo class='marginbottom100' :isAdd='isAdd' :property='data.property' :storeList='data.storeList' :business='data.business' :courseProperty='data.courseProperty' :organList='data.organList' :tempList='data.tempList'  :labelList="data.labelList"
            ref="childRules"></BaseInfo>
        </TabPane>
        <TabPane label="优化设置">
          <BetterSetting></BetterSetting>
        </TabPane>
        <TabPane label="宝贝详情">
          <GoodsDetail></GoodsDetail>
        </TabPane>

        <!-- <TabPane label="租赁流程">
          <RentStep></RentStep>
        </TabPane> -->
        <TabPane label="商品参数">
          <RentNeedKnow></RentNeedKnow>
        </TabPane>
        <!-- <TabPane label="视频">
          <BaseVedio></BaseVedio>
        </TabPane> -->
      </Tabs>
    </Card>

    <!-- 底部操作按钮 -->
    <div class="footer-fixed-action" v-show="!isbodyList">
      <div class="flex-start-box">
        <Button type="primary" @click='save("ruleValidate")'>保存</Button>
        <Button class='marginleft10' @click='back'>返回</Button>
      </div>
    </div>
    <!-- 审核弹窗 -->
    <Modal v-model="auditModal" title="审核" width='1000'>
      <Form ref="auditValidate" :model="auditForm" :rules="auditValidate" :label-width="80">
        <FormItem label="审核状态" prop="audit">
          <RadioGroup v-model="auditForm.audit">
            <Radio :label="item.id" v-for="(item,index) in auditType">{{item.name}}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="拒绝原因" prop="reason" v-if='auditForm.audit==-1'>
          <Input v-model="auditForm.reason" type="textarea" :rows="4" placeholder="请输入拒绝原因"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="saveAudit('auditValidate')" :disabled="isDisable" :loading="isLoading">保存</Button>
      </div>
    </Modal>


    <!-- 添加弹窗 -->
    <!-- 添加，修改，查看公用弹窗，根据isProdEdit的值判断，新增add,修改put，查看detail -->
    <Modal v-model="createProdModal" :title="createProdTitle" width='1000'>
      <Form ref="prodForm" :model="prodForm" :rules="ruleProdFormValidate" :label-width="80">
        <FormItem label="产品名称">
          {{prodForm.name}}
        </FormItem>
        <FormItem label="分类">
          {{prodForm.class_name}}
        </FormItem>
        <FormItem label="门店" prop="store_id">
          <Select v-if='isProdEdit=="add"' v-model="prodForm.store_id" filterable placeholder="请选择门店" :disabled='isProdEdit=="put"'>
            <Option v-for="item in data.storeList" :value="item.id" :key="item.id">{{item.name}}</Option>
          </Select>
          <span v-if='isProdEdit=="detail" || isProdEdit=="put"'>
            {{prodForm.store_name}}
          </span>
        </FormItem>
        <!-- <FormItem label="上架" prop="mobile">
          <Select v-model="prodForm.role_id" placeholder="请选择门店">
            <Option value="beijing">店员</Option>
          </Select>
        </FormItem> -->

        <FormItem label="规格模板">
          <div class="detail-table border">
            <Row class='row-main-title text-center'>
              <Col class='border-r' span="8">规格名称</Col>
              <Col class='border-r' span="8">可分配数量</Col>
              <Col span="4">分配数量</Col>
              <Col span="4">上架</Col>
            </Row>
            <!-- <Row class='row-main-content' v-for="(item,index) in data.normsList">
              <Col span="8">{{item.name}}</Col>
              <Col span="8">{{item.number_count}}</Col>
              <Col span="4">
              <Input type="text" v-model="item.allot_number" :disabled='isProdEdit=="detail"' />
              </Col>
              <Col span="4">{{item.check_estate}}</Col>
            </Row> -->
          </div>


        </FormItem>

      </Form>
      <div slot="footer">
        <!-- 查看详情的时候不显示，修改和编辑显示 -->
        <Button v-if='isProdEdit=="detail"' @click="createProdModal=false" :disabled="isDisable" :loading="isLoading">关闭</Button>
        <Button v-else type="primary" @click="saveProd('prodForm')" :disabled="isDisable" :loading="isLoading">保存</Button>

      </div>
    </Modal>

    <!-- 查看弹窗 -->
    <!-- @on-ok="ok" @on-cancel="cancel" -->
    <Modal v-model="detailModal" title="查看" width='80%'>
      <div class="detail-table">
        <div class="base-info">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">基本信息</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">门店：</span> 测试门店</Col>
            <Col span="8"><span class="font-gray">下单时间：</span>测试门店</Col>
            <Col span="8"><span class="font-gray">月卡过期：</span>测试门店</Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">付款号：</span>测试门店</Col>
            <Col span="8"><span class="font-gray">订单号：</span>测试门店</Col>
            <Col span="8">
            <span class="font-gray">订单状态：</span><span class="font-orange">已租赁，待归还</span>
            <Button type="primary" ghost shape="circle" size='small' class='marginleft10' @click='pay'>赔付</Button>
            <Button type="primary" ghost shape="circle" size='small' class='marginleft10' @click='account'>结算</Button>
            </Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">产品名称：</span>测试门店</Col>
            <Col span="8"><span class="font-gray">金额：</span><span class="font-orange">180</span></Col>
            <Col span="8"><span class="font-gray">付款方式：</span><span class="font-orange">微信支付</span></Col>
          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">用户昵称：</span>xd</Col>
            <Col span="8"><span class="font-gray">租金：</span>12.00</Col>
            <Col span="8"><span class="font-gray">实租天数：</span>15</Col>
          </Row>
        </div>
        <div class="order-record margin-top-10">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">订单日志</Col>
          </Row>
          <Row class='row-main-title table-head-bg'>
            <Col span="3" class='padding10'>操作人</Col>
            <Col span="3" class='border-left'>订单状态</Col>
            <Col span="12" class='border-left'>基本信息</Col>
            <Col span="3" class='border-left'>操作说明</Col>
            <Col span="3" class='border-left'>操作时间</Col>
          </Row>
          <!-- <Row class='row-main-content' v-for='(item,index) in 3'>
            <Col span="3"><span>xd</span></Col>
            <Col span="3"><span class="font-orange">待付款</span></Col>
            <Col span="12"><span>客户下单，付款号:20210222155135603362874dac62587,订单号：H202102221551356033628752fa0</span></Col>
            <Col span="3"><span class="font-gray">-</span></Col>
            <Col span="3"><span class="font-gray">2011-11-20</span></Col>
          </Row> -->

        </div>
      </div>
      <div slot="footer">
        <Button @click='detailModal=false'>关闭</Button>
      </div>
    </Modal>

    <!-- 删除弹窗 -->
    <Modal v-model="delModal" title="提示">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定删除数据？</p>
      <div slot="footer">
        <Button @click='delModal=false'>取消</Button>
        <Button type="primary" @click='confirmDel'>确定</Button>
      </div>
    </Modal>
    <!-- 结算弹窗 -->
    <Modal v-model="accountModal" title="结算">
      <Form ref="accountformValidate" :model="accountformValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="原交易号" prop="code">
          <Input v-model="accountformValidate.realname"></Input>
        </FormItem>
        <FormItem label="金额" prop="momey">
          <Input v-model="accountformValidate.momey"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click='accountModal=false'>取消</Button>
        <Button type="primary">确定</Button>
      </div>
    </Modal>
    <!-- 赔付弹窗 -->
    <Modal v-model="createUserQrModal" title="生成用户二维码" >
      <Form ref="payformValidate" :model="payformValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="课程产品" prop="code">
          <select name="" v-model="product_course_id" style="width:300px;height:32px;" >
            <option :value="item.id" v-for=" item in data.allList" >{{item.name}}</option>

          </select>
        </FormItem>
        <FormItem label="用户姓名">
          <Input v-model="username" style="width:300px;" placeholder="请输入用户姓名"></Input>
          <Button type="warning" @click='getUserData'>选择会员</Button>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click='createUserQrModal=false'>取消</Button>
        <Button type="primary" @click="makeQR">确定生成用户二维码</Button>
      </div>
    </Modal>

    <Modal v-model="payModal" title="赔付" >
      <Form ref="payformValidate" :model="payformValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="原交易号" prop="code">
          <Input v-model="payformValidate.money" type="textarea"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click='payModal=false'>取消</Button>
        <Button type="primary">确定</Button>
      </div>
    </Modal>
    <!-- 选择会员弹窗 -->
    <Modal v-model="changeUserModal" title="选择会员" width='800'>
      <div class="p-relative" style="padding-top: 10px;">

        <div class="flex-box search-area">

          <div class="flex-item">
            <Input v-model="searchObj.keywords" placeholder="请输入姓名或手机号" style="width: 150px" />
          </div>
          <div class="flex-item search-btn" @click="searchUser">
            <Button type="warning">搜索</Button>
          </div>
          <div class="flex-item search-btn" @click="resetUser">
            <Button>重置</Button>
          </div>

        </div>
      </div>
      <Table :columns="tableUserOption" :data="data.userList" border :no-data-text="loadingText ? loadingText : '暂无数据'"
        border ref="tables" editable search-place="top">

        <template slot-scope="{ row, index }" slot="username">
          {{row.username==''?row.nickname:row.username}}
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">
            <Button type='warning' @click="confirmChange(row, index)" size='small'>选择</Button>
          </div>
        </template>
      </Table>
      <Page class="foot-page" :current='page.userCurrent' :total="page.userTotal" :page-size="page.userPageSize" show-total
        show-elevator @on-change="changeUserPage"></Page>
      <div slot="footer">
        <Button @click='changeUserModal=false'>取消</Button>
      </div>
    </Modal>

    <!-- 二维码弹窗 -->
    <Modal v-model="qrModal" title="查看二维码" :mask-closable='maskClick'>
      <div id="qr" ref="qrCodeUrl"></div>
      <div slot="footer">
        <Button @click='closeQrModal'>关闭</Button>
        <!-- <Button type="primary">确定</Button> -->
      </div>
    </Modal>
  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import QRCode from 'qrcodejs2'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'

  import {
    tableOption,
    tableUserOption
  } from '@/data/product-group/product-shop/product-shop.js'
  // 接口
  import {
    getList,
    setAudit,
    detail,
    addView,
    add,
    put,
    del,
    getProdlist,
    addProd,
    // putProd,
    delProd,
    detailProd,
    courseDetail,
    getUserData
  } from '@/api/product-group/product-shop'
  import Tables from '_c/tables'
  import BaseInfo from './base-info/base-info.vue'
  import BetterSetting from './better-setting/better-setting.vue'
  import GoodsDetail from './goods-detail/goods-detail.vue'
  import RentStep from './rent-step/rent-step.vue'
  import RentNeedKnow from './rent-need-know/rent-need-know.vue'

  import BaseVedio from './base-vedio/base-vedio.vue'
import { exit } from 'process'

  export default {
    name: 'tables_page',
    components: {
      Tables,
      BaseInfo,
      BetterSetting,
      GoodsDetail,
      RentStep,
      RentNeedKnow,
      BaseVedio
    },
    created() {
      this.getList()
      let _this = this
      this.$nextTick(function() {
        _this.role_Add = permission(this.roles, 'product/insertEnterSupply')
        _this.role_Edit = permission(this.roles, 'product/updateEnterSupply')
        _this.role_Del = permission(this.roles, 'product/deleteSupply')
        _this.role_distribute = permission(this.roles, 'product/storeProductList') // 分配
      })

        // if (!this.role_Add) {
        //   let config = {
        //     content: '没有权限访问',
        //     background: true
        //   }
        //   this.$Message.error(config)
        //   return
        // }
        // this.createModal = true;
        // this.isbodyList = false
        // this.createTitle = '新增'
        // this.isAdd = true
        // this.addView();
        // let obj = {
        //   property_id: null,
        //   cover_image: '',
        //   album_image: '',
        //   album_imageArr: [],
        //   business_id: null,
        //   store_id:0,
        //   store_list:0,
        //   remark: '',
        //   name: '',
        //   cash: null,
        //   period_use_day: null,
        //   sorter:"0",
        //   is_home:"0",
        //   is_rec:"0",
        //   pattern: 0, // 默认单规格
        //   normsValue: [],
        //   normsValueSingle: [{
        //     cover_image: '', // 封面
        //     sku:'',
        //     name: '', // 规格名称
        //     price: 0, // 周期价格
        //     cost: 0, // 成本
        //     number: 0, // 库存
        //     src: '',
        //     norms_ids: 0,
        //     sorter:0,
        //     virtual_sale_count:0,
        //     start_time:'',
        //     end_time:''
        //   }]
        // }
        // this.setProdGroupBasicObj(obj) // 初始化
        // this.resetProdGroupDetail('')
    },
    watch: {

    },
    mounted() {

    },
    computed: {

      ...mapState({
        roles: state => state.user.roles,
        prodGroupBasicObj: state => state.share.prodGroupBasicObj,
        prodGroupSeoObj: state => state.share.prodGroupSeoObj,
        prodGroupGoodsDetailObj: state => state.share.prodGroupGoodsDetailObj, // 宝贝详情
        prodGroupRentNeedKnowObj: state => state.share.prodGroupRentNeedKnowObj, // 门店须知
        prodGroupRentStepObj: state => state.share.prodGroupRentStepObj // 租赁流程

      })
    },
    data() {
      return {
        maskClick:false,
        qrModal: false,
        //二维码url
        qrUrl: 'https://api.aiouning.com/param/?',
        auditForm: {
          audit: -1
        },
        auditType: [{
          name: '通过',
          id: 2
        }, {
          name: '拒绝',
          id: -1
        }],
        auditModal: false, //审核弹窗
        rowId: '',
        store_name: '',
        supply_id: '', // 总商品id,分配修改用到
        row_property_value_name: '',
        delId: '',
        isProdEdit: 'add', // add新增，put修改，detail查看，控制共有的弹窗可编辑字段
        delProdId: '',
        delType: 1, // 1主表删除
        tableOption: tableOption,
        isbodyList: true,
        switch1: false,
        createTitle: '新增',
        createProdTitle: '新增',
        isAdd: true, // 新增true,修改false
        isDisable: false, // 新增时提交按钮点击状态
        isLoading: false, // 新增时提交按钮loading状态
        createUserQrModal:false,
        changeUserModal:false,

        username:'',
        user_id:0,
        product_course_id:0,


        tableUserOption: [{
            title: 'ID',
            key: 'id',
            align: 'center',
            width: '80'
          },
          {
            title: '会员名称',
            key: 'username',
            align: 'center',
            slot: 'username',
          },
          {
            title: '电话',
            key: 'mobile',
            align: 'center',

          },
          // {
          //   title: '运动卡余额',
          //   key: 'balance',
          //   align: 'center'
          // },
          {
            title: '会员等级',
            key: 'vip_level',
            align: 'center',
            render: (h, params) => {
              let txt = '';
              switch (params.row.vip_level) {
                case 0:
                  txt = '大众会员'
                  break;
                case 1:
                  txt = '一星会员'
                  break;
                case 2:
                  txt = '二星会员'
                  break;
                case 3:
                  txt = '三星会员'
                  break;
                case 4:
                  txt = '四星会员'
                  break;
                case 5:
                  txt = '五星会员'
                  break;
              }

              return h('span', txt)
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'

          }
        ],

        loadingText: '',
        tableData: [],
        data: {
          businessList: [],
          detaiNormsList: [],
          list: [{
            id: 14,
            name: '三贵MOCC-43L',
            property_value_name: '轮椅'
          }],
          tempList:[],
          labelList:[],
          property: [],
          courseProperty:[],
          normsTemplate: [],

          prodClassList: [{
            id: 14,
            name: '分类1'
          }, {
            id: 16,
            name: '分类2'
          }],
          detailList: [

          ],
          prodlist: [{
            id: 20,
            store_name: '门店名称',
            name: '轮椅',
            number: 20
          }],
          // 规格模板
          normsList: [{
            id: 20,
            knumber: 0,
            norms_name: '规格1',
            number: 20
          }],
          storeList: [],
          prodDetailForm: {
            store_name: '一心堂',
            name: '三贵',
            property_value_name: '轮椅'

          }
        },
        // 查询参数
        searchObj: {
          realname: ''
        },
        // 分页
        page: {
          pageSize: 10,
          current: 1,
          total: 0
        },
        // 分页end
        // 弹窗状态
        createModal: false, // 新增，修改弹窗
        createProdModal: false, // 分配详情，添加按钮弹窗
        detailModal: false, // 查看弹窗
        delModal: false, // 删除弹窗
        payModal: false, // 弹窗
        accountModal: false, // 弹窗
        // 弹窗状态end//赔付弹窗
        formValidate: {
          realname: '',
          mobile: '',
          password: '',
          role_id: '',
          store_id: [],
          isStoreManager: ''
        },
        prodForm: {
          store_id: ''
          // 分配弹窗新增

        },
        // 赔付
        payformValidate: {

        },
        // 结算
        accountformValidate: {

        },
        ruleProdFormValidate: {
          store_id: [{
            required: true,
            // type: 'number',
            message: '请输选择门店',
            trigger: 'change'
          }]

        },
        auditValidate: {
          reason: [{
            required: true,
            message: '请输入拒绝原因',
            trigger: 'blur'
          }],
        },
        ruleValidate: {
          realname: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          role_id: [{
            required: true,
            message: '请选择角色',
            trigger: 'change'
          }],
          mobile: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'change'
          }, {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'change'
          }]

        },
        // 权限标识
        role_Add: false,
        role_Edit: false,
        role_Del: false,
        role_distribute: false

        // 权限结束
      }
    },
    methods: {
      ...mapMutations([
        'resetProdGroupDetail',
        'setProdGroupGoodsDetailObj', // 宝贝详情
        'setProdGroupBasicObj', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
        'setProdGroupRentNeedKnowObj',
        'setBB'
      ]),
      createUserQr(){

        this.createUserQrModal = true
      },
      changeUserPage(e) {
        this.page.userCurrent = e;
        this.getUserData();
      },
      searchUser() {
        this.getUserData();
      },
      resetUser() {
        this.searchObj = {
          keywords: ''
        }
        this.getUserData();
      },
       confirmChange(item) {
        this.username = item.username == '' ? item.nickname : item.username
        this.mobile = item.mobile
        this.user_id = item.id
        this.changeUserModal = false
      },
      getUserData() {
        this.changeUserModal = true;
        let _this = this


        let params = {
          page: this.page.userCurrent,
          keywords: _this.searchObj.keywords,
          store_id: this.store_id
        }

        getUserData(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.$forceUpdate()
            _this.data.userList = result.list
            // console.log('****', _this.data.userList)
            _this.page.userTotal = result.total
            _this.page.userPageSize = result.size

          }
        }).catch(function(error) {
          // 异常

        })
      },
      //生成二维码
      makeQR() {
        // 清空再赋值，避免重复生成
        const codeHtml = document.getElementById("qr");
        codeHtml.innerHTML = "";
         // 清空再赋值，避免重复生成 end
        console.log(this.product_course_id)
        this.qrModal = true;
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: this.qrUrl+'&product_id='+ this.product_course_id + '&user_id=' + this.user_id,
          width: 160,
          height: 160,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      },
      closeQrModal() {
        this.qrModal = false;

      },


      audit(row) {
        this.rowId = row.id
        this.auditModal = true;
        this.auditForm = {};
        this.auditForm = {
          audit: -1
        }
        this.handleReset('auditValidate'); //验证重置
      },
      // 列表数据
      getList() {
        let _this = this
        let params = {
          page: this.page.current,
          size: this.page.pageSize,
          name: this.searchObj.name
        }
        this.data.list = []
        getList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.data.property = result.property
            _this.data.allList = result.allList
            _this.data.courseProperty = result.courseProperty
            _this.data.organList = result.organList
            _this.data.tempList = result.tempList
            _this.data.labelList = result.labelList
            _this.qrUrl = result.qrCode
            _this.page.total = result.total
          } else {
            // let config = {
            //   content: res.data.message,
            //   background: true
            // }
            // _this.$Message.error(config)
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },

      prodList(row) {
        console.log(row.id)
        let _this = this
        // if (!this.role_distribute) {
        //   let config = {
        //     content: '没有权限访问',
        //     background: true
        //   }
        //   this.$Message.error(config)
        //   return
        // }

        this.row_property_value_name = row.property_value_name
        this.productModal = true
        this.supply_id = row.id // 分配修改，添加用到总产品id
        this.store_name = row.store_name
        this.prodForm = {}
        this.prodForm = row
        this.prodForm.class_name = this.row_property_value_name
        let params = {
          supply_id: row.id,
          Page: this.page.current,
          store_name: row.store_name
        }
        this.getProdlist(params)
      },
      getProdlist(params) {
        let _this = this
        getProdlist(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.prodlist = result.list
            _this.data.normsList = JSON.parse(JSON.stringify(result.normsValue))
            _this.data.detaiNormsList = JSON.parse(JSON.stringify(result.normsValue))
            _this.data.storeList = result.store
            _this.page2.total = result.total
          } else {
            // axios响应拦截

          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },

      changepage(e) {
        this.page.current = e
        this.getList()
      },
      // 返回
      back() {
        this.isbodyList = true
      },
      addView() {
        let _this = this
        // 新增的时候用于获取下拉框分类数据
        addView().then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.normsTemplate = result.normsTemplate;
            _this.data.property = result.property
            _this.data.storeList = result.storeList
            _this.data.business = result.business
            // _this.$Message.success('操作成功');
          } else {

            // axios响应拦截
          }
        }).catch(function(error) {
          // 异常

          console.log(error)
        })
      },

      createProd() {

         this.createModal = true;
        this.isbodyList = false
        this.createTitle = '新增'
        this.isAdd = true

         let obj = {
          property_id: null,
          cover_image: '',
          album_image: '',
          album_imageArr: [],
          business_id: null,
          store_id:[],
          store_list:0,
          remark: '',
          name: '',
          cash: null,
          period_use_day: null,
          sorter:"0",
          is_home:"0",
          is_rec:"0",
          is_hot:'0',
          shop_type:'1',
          is_cloudhouse:'1',
          sale_estate:'1',
          pattern: 0, // 默认单规格
          normsValue: [],
          normsValueSingle: [{
            cover_image: '', // 封面
            sku:'',
            name: '', // 规格名称
            price: 0, // 周期价格
            cost: 0, // 成本
            number: 0, // 库存
            src: '',
            norms_ids: 0,
            sorter:0,
            virtual_sale_count:0,
            start_time:'',
            end_time:''
          }]
        }
        this.setProdGroupBasicObj(obj) // 初始化
        this.resetProdGroupDetail('')

        // this.data.normsList = []
        // this.data.normsList = JSON.parse(JSON.stringify(this.data.detaiNormsList))
        this.addView();

      },
      editProd(row) {
        this.isProdEdit = 'put'
        this.createProdTitle = '修改'
        this.isAdd = false
        this.createProdModal = true
        this.prodForm = {}
        this.prodForm = row
        let obj = {
          supply_id: row.supply_id,
          store_id: row.store_id,
          id: row.id
        }

        this.getDetailProd(obj)
      },

      // 修改
      async edit(row, index) {
        // console.log(row)
        // if (!this.role_Edit) {
        //   let config = {
        //     content: '没有权限访问',
        //     background: true
        //   }
        //   this.$Message.error(config)
        //   return
        // }
        this.rowId = row.id

        // let obj = JSON.parse(JSON.stringify(row)); //行数据
        this.isbodyList = false
        this.createTitle = '修改'
        this.isAdd = false
        this.formValidate = {} // 表单重置

        console.log('72')
        let norms = await courseDetail({
          id: row.id
        })
        console.log('******',norms);
        this.data.property = norms.data.data.property
        this.data.storeList = norms.data.data.store
        this.data.business = norms.data.data.business
         this.setProdGroupGoodsDetailObj(norms.data.data.detail.expand.description)
         this.setProdGroupRentNeedKnowObj(norms.data.data.detail.expand.parameters)
        this.data.normsTemplate = norms.data.data.normsTemplate;
        // console.log(1111)
        // this.data.businessList = norms.data.data.business;
        // 接口返回图片字符串，需要转成数组，并包括url和extension属性
        let imageArr = norms.data.data.productExpand.album_image || []
        let album_imageArr = imageArr.map(res => {
          // console.log(res)
          let endStr = res.url.substring(res.url.lastIndexOf('.') + 1, res.url.length)

          return {
            file_name: res.path,
            url: res.url,
            extension: endStr // 文件类型，图片或者视频，用于显示img还是video
          }
        })
          // console.log('22222221',album_imageArr)
        // 封面类型，MP4还是图片
        let pathName = norms.data.data.detail.cover_image
        let cover_image_type = pathName.substring(pathName.lastIndexOf('.') + 1, pathName.length);
        let cover_image_file_name = pathName.substring(pathName.lastIndexOf('/') + 1, pathName.length);

        // 视频
        // let video_url = norms.data.data.productExpand.video_url || '';
        // let video_name = video_url.substring(video_url.lastIndexOf('/') + 1, video_url.length) || '';

          // console.log(33333)
        console.log(norms.data.data.detail.store_id,row.store_id)
        let obj = {
          cover_image: norms.data.data.detail.cover_image,
          // video_url: video_url ? video_url : '',
          // video_name: video_name,
          cover_image_file_name: cover_image_file_name,
          cover_image_type: cover_image_type, // 用于判断显示图片还是视频
          album_imageArr: album_imageArr,
          // cash: row.cash,
          name: row.name,
          remark:row.remark,
          // period_use_day: row.period_use_day.toString(),
          property_id: row.property_value_id,
          pattern: row.pattern,
          business_id: row.business_id.toString(),
          sorter:row.sorter,
          is_home:row.is_home.toString(),
          label_id:row.label_id,
          temp_id:row.temp_id,
          // is_rec:norms.data.data.detail.is_rec.toString(),
          is_hot:norms.data.data.detail.is_hot.toString(),
          store_id:parseInt(row.store_id),
          sale_estate:row.sale_estate.toString(),
          is_cloudhouse:norms.data.data.detail.expand.is_cloudhouse.toString(),
          shop_type:norms.data.data.detail.expand.shop_type.toString(),
          // store_id:row.store_id,
          // store_id: [25,32],
          business_id:norms.data.data.detail.business_id,
          course_property_id:norms.data.data.detail.course_property_value_id,
          // organ_id:row.organ_id,
          // is_rec:row.is_rec.toString(),
          normsValue: norms.data.data.normsValue,
           // fit_member: norms.data.data.detail.fit_member,
            // course_time: norms.data.data.detail.course_time,
            // sale_start_at:row.sale_start_at,
            // sale_expire_at:row.sale_expire_at,

        }
        // console.log('obj11111',norms.data.data.detail)
        console.log('obj11111',obj)
        // 单规格，多规格
        if (row.pattern == 1) {

          // 多
          norms.data.data.normsValue.forEach(function(cv) {
            if (cv.cover_image) {
              // 预防封面没有值的时候
              let i = cv.cover_image.lastIndexOf('.') + 1
              let type = cv.cover_image.substring(i, cv.cover_image.length)
              cv.cover_image_type = type // 用于多规格列表封面显示
            }

          })

          obj.normsValue = norms.data.data.normsValue
          obj.normsValueSingle = [{
            cover_image: '', // 封面
            name: '', // 规格名称
            price: 0, // 周期价格
            cost: 0, // 成本
            number: 0, // 库存
            sale_count: 0, // 虚拟销量
            src: '',
            norms_ids: 0
          }]
          this.setProdGroupBasicObj(obj)
        } else {
          // 单
          let str = norms.data.data.normsValue[0].cover_image
          let i = str.lastIndexOf('.') + 1
          norms.data.data.normsValue[0].cover_image_type = str.substring(i, str.length)
          obj.normsValueSingle = norms.data.data.normsValue

          obj.normsValue = []
          this.setProdGroupBasicObj(obj)
        }
        // console.log('******obj',obj)
        this.setProdGroupBasicObj(obj)

        this.setProdGroupGoodsDetailObj(norms.data.data.detail.expand.description) // 宝贝详情
      },

      courseDetail(id) {
        let _this = this

        return new Promise(function(resolve, reject) {
          courseDetail(id).then(res => {
            if (res.data.status == 1) {
              let result = res.data.data

              // console.log(result.result)
              resove(result.normsValue)
            } else {
              reject('错误')
              _this.delModal = false
              let config = {
                content: res.data.message,
                background: true
              }
              _this.$Message.error(config)
            }
          }).catch(function(error) {
            reject('错误')
            // 异常
            _this.delModal = false
            console.log(error)
          })
        })
      },

      // 查看
      detail(row) {
        this.detailModal = true
      },
      getDetail(id) {
        let _this = this
        // 修改的时候调用获取详情
        let obj = {
          id: id
        }
        detail(obj).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.detailList = result
            _this.delModal = false
            _this.$Message.success('操作成功')
            _this.getList() // 重新刷新数据
          } else {
            _this.delModal = false
            // axios响应拦截
          }
        }).catch(function(error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
      },
      numberChange(e) {
        console.log(this.data.normsList)
      },
      // 分配详情
      detailProd(row) {
        let _this = this
        console.log(row)
        // this.productDetailModal = true;
        this.isProdEdit = 'detail'
        this.createProdTitle = '分配门店详情'
        this.createProdModal = true
        let obj = {
          supply_id: row.supply_id,
          store_id: row.store_id,
          id: row.id
        }
        _this.prodForm.name = row.name
        this.getDetailProd(obj)
      },
      getDetailProd(obj) {
        let _this = this
        detailProd(obj).then(res => {
          if (res.data.status == 1) {
            console.log('uuuuuuu')
            let result = res.data.data
            _this.data.normsList = result.normsValue

            _this.prodForm.class_name = _this.row_property_value_name
            _this.prodForm.store_id = result.store[0].store_id
            _this.prodForm.store_name = result.store[0].store_name

            _this.delModal = false
          } else {
            _this.delModal = false
            // axios响应拦截
          }
        }).catch(function(error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
      },
      // 删除
      del(row) {
        // if (!this.role_Del) {
        //   let config = {
        //     content: '没有权限访问',
        //     background: true
        //   }
        //   this.$Message.error(config)
        //   return
        // }
        this.delType = 1
        this.delModal = true
        this.delId = row.id
        // 删除接口
      },

      delProd(row) {
        this.delType = 2
        this.delModal = true
        this.delId = row.id
      },
      confirmDel() {
        let _this = this
        let obj = {
          id: this.delId
        }
        if (this.delType == 1) {
          del(obj).then(res => {
            if (res.data.status == 1) {
              // let result=res.data.data;
              // _this.data.list=result;
              _this.delModal = false
              _this.$Message.success('操作成功')
              _this.getList() // 重新刷新数据
            } else {
              _this.delModal = false
              // axios响应拦截
            }
          }).catch(function(error) {
            // 异常
            _this.delModal = false
            console.log(error)
          })
        } else {
          delProd(obj).then(res => {
            if (res.data.status == 1) {
              // let result=res.data.data;
              // _this.data.list=result;
              _this.delModal = false
              _this.$Message.success('操作成功')
              let params = {
                supply_id: _this.supply_id,
                Page: _this.page2.current,
                store_name: _this.store_name
              }
              _this.getProdlist(params) // 重新刷新数据
            } else {
              _this.delModal = false
              let config = {
                content: res.data.message,
                background: true
              }
              _this.$Message.error(config)
            }
          }).catch(function(error) {
            // 异常
            _this.delModal = false
            console.log(error)
          })
        }
      },
      // 刷新
      refresh() {
        // console.log(7777)
        this.searchObj = {} // 清空搜索框
        this.getList()
      },
      // 重置
      reset() {
        this.searchObj = {} // 清空搜索框
        this.getList()
      },
      // 查询
      search() {
        this.getList()
      },
      handleDelete(params) {
        console.log(params)
      },

      saveProd(name) {
        // 打印规格模板，保存参数要用

        let _this = this

        this.$refs[name].validate((valid) => {
          if (valid) {
            if (_this.isAdd) {
              // 新增
              let obj = {
                allot_number: _this.data.normsList[0].allot_number, // ?
                business_id: '', // ?
                name: _this.prodForm.name,
                normsValue: _this.data.normsList, // 数组
                sale_estate: 0, // ?
                store_id: _this.prodForm.store_id,
                supply_id: _this.supply_id, // 总商品id
                wait_allot_number: 0
              }

              // 新增接口

              addProd(obj).then(res => {
                if (res.data.status == 1) {
                  // let result=res.data.data;
                  // _this.data.list=result;
                  _this.createProdModal = false
                  _this.$Message.success('操作成功')
                  let params = {
                    supply_id: _this.supply_id,
                    Page: _this.page2.current,
                    store_name: _this.store_name
                  }
                  _this.getProdlist(params) // 重新刷新数据
                } else {
                  _this.createModal = false
                  console.log(res.message)
                  let config = {
                    content: res.data.message,
                    background: true
                  }
                  _this.$Message.error(config)
                }
              }).catch(function(error) {
                // 异常
                _this.createModal = false
                let config = {
                  content: res.data.message,
                  background: true
                }
                _this.$Message.error(config)
              })
            } else {
              // 修改
              let obj = {
                normsValue: _this.data.normsList, // 数组
                product_id: _this.prodForm.id,
                sale_estate: 0 // ?

              }
              // 修改接口
              putProd(obj).then(res => {
                if (res.data.status == 1) {
                  // let result=res.data.data;
                  // _this.data.list=result;
                  _this.createProdModal = false
                  let params = {
                    supply_id: _this.supply_id,
                    Page: _this.page2.current,
                    store_name: _this.store_name
                  }
                  _this.getProdlist(params) // 重新刷新数据
                  _this.$Message.success('操作成功')
                } else {
                  // axios响应拦截
                }
              }).catch(function(error) {
                // 异常
                console.log(error)
              })
            }

            // this.$Message.success('Success!');
          } else {
            this.$Message.error('请输入必填项!')
          }
        })
      },
      saveAudit(name) {
        let _this = this;
        this.$refs[name].validate((valid) => {
          if (valid) {
            let obj = {
              id: this.rowId,
              reason: this.auditForm.reason || '',
              audit: this.auditForm.audit
            }
            setAudit(obj).then(res => {
              if (res.data.status == 1) {
                // let result=res.data.data;
                _this.auditModal = false;
                _this.$Message.success('操作成功')

                _this.getList() // 重新刷新数据
              } else {
                _this.createModal = false
                // axios响应拦截
              }
            }).catch(function(error) {
              // 异常
              _this.createModal = false
              console.log(error)
            })

          } else {
            this.$Message.error('请输入必填项!');
          }
        })


      },

      async save(name) {


        let _this = this
        let flag = await this.$refs['childRules'].validateForm() // 验证子组件表单
        // console.log(_this.prodGroupRentNeedKnowObj)
        // return ;
        let isSingle = false
        let isNorms = false
        let isSinggleTemplate = false
        let isNormsTemplate = false

        if (!flag) {
          this.$Message.error('请填完所有必填项')
          return
        }

        if (this.prodGroupBasicObj.pattern == 1) {
          // 多
          this.prodGroupBasicObj.normsValue.forEach(function(cv) {
            if (!cv.cover_image) {
              isNorms = true
            }
          })

          if (this.prodGroupBasicObj.normsValue.length == 0) {
            isNormsTemplate = true
          }
        } else {
          this.prodGroupBasicObj.normsValueSingle.forEach(function(cv) {
            if (!cv.cover_image) {
              isSingle = true
            }
          })
        }
        if (isNormsTemplate) {
          // 多规格情况
          this.$Message.error('请设置规格模板')
          return
        }
        if (isSingle || isNorms) {
          this.$Message.error('规格封面不能为空')
          return
        }

        if (!this.prodGroupBasicObj.cover_image_file_name) {
          this.$Message.error('请选择封面')
          return
        }
        console.log(this.prodGroupBasicObj.album_imageArr.length)
        if (this.prodGroupBasicObj.album_imageArr.length <= 0) {
          this.$Message.error('请选择相册图片')
          return
        }

        console.log(this.prodGroupBasicObj) // 基本信息
        console.log(this.prodGroupSeoObj) // seo优化信息

        if (_this.isAdd) {
          // 新增
          let basicObj = {
            name: this.prodGroupBasicObj.name, // 产品名称
            property_id: this.prodGroupBasicObj.property_id, // 分类
            pattern: this.prodGroupBasicObj.pattern, // 规格类型
            template_norms_id: this.prodGroupBasicObj.template_norms_id, // 规格模板id
            coverImage: this.prodGroupBasicObj.cover_image_file_name, // 封面
            is_home:this.prodGroupBasicObj.is_home,
             // is_rec:this.prodGroupBasicObj.is_rec,
             is_hot:this.prodGroupBasicObj.is_hot,
            sorter:this.prodGroupBasicObj.sorter,
            store_id :this.prodGroupBasicObj.store_id,
            // fit_member:this.prodGroupBasicObj.fit_member,
            // course_time:this.prodGroupBasicObj.course_time,
            // sale_start_at:this.prodGroupBasicObj.sale_start_at,
            // sale_expire_at:this.prodGroupBasicObj.sale_expire_at,
            business_id:this.prodGroupBasicObj.business_id,
            // course_property_id:this.prodGroupBasicObj.course_property_id,
            // organ_id:this.prodGroupBasicObj.organ_id,
            remark:this.prodGroupBasicObj.remark,
            // is_cloudhouse:this.prodGroupBasicObj.is_cloudhouse,
            sale_estate:this.prodGroupBasicObj.sale_estate,
            temp_id:this.prodGroupBasicObj.temp_id,
            label_id:this.prodGroupBasicObj.label_id,
          }
          let expandObj = {
            seo_title: this.prodGroupSeoObj.seo_title, //
            seo_keyword: this.prodGroupSeoObj.seo_keyword, //
            seo_description: this.prodGroupSeoObj.seo_description, //
            seo_tag: this.prodGroupSeoObj.seo_tag, //
            description: this.prodGroupGoodsDetailObj, // 宝贝详情  <p>二问题</p>
            parameters: this.prodGroupRentNeedKnowObj,//产品参数
            template_norms_id:this.prodGroupBasicObj.template_norms_id,
            video_url: this.prodGroupBasicObj.video_name, // 视频
            shop_type:this.prodGroupBasicObj.shop_type,
            is_cloudhouse:this.prodGroupBasicObj.is_cloudhouse,
          }
          let normsValueObj = {
            cover_image: '', // 相片
            src: '', // 图片完整链接
            price: '', // 价格
            number: '', // 库存
            cost: '', // 成本
            sale_count: '', // 销量
            norms_ids: '', // 规格ids
            name: '', // 规格名称
            use_day:'',
          }

          let obj = {
            // 新增待定
            basic: basicObj, // obj

            expand: expandObj,
            album_image: this.prodGroupBasicObj.album_imageArr.length ? this.prodGroupBasicObj.album_imageArr.map(
              res => {
                return res.file_name
              }) : [], // 相册 obj
            normsValue: this.prodGroupBasicObj.pattern == 0 ? this.prodGroupBasicObj.normsValueSingle : this.prodGroupBasicObj.normsValue // 单规格

            // isStoreManager:_this.formValidate.isStoreManager, //??
          }

          // 新增接口
          add(obj).then(res => {
            if (res.data.status == 1) {
              // let result=res.data.data;
              // _this.data.list=result;
              _this.$Message.success('操作成功')
              _this.isbodyList = true
              _this.getList() // 重新刷新数据
            } else {
              _this.createModal = false
              // axios响应拦截
            }
          }).catch(function(error) {
            // 异常
            _this.createModal = false
            console.log(error)
          })
        } else {
          // 修改
          let basicObj = {
            business_id: this.prodGroupBasicObj.business_id,
            addNewNorms: false,
            id: this.rowId,
            name: this.prodGroupBasicObj.name, // 产品名称
            period_use_day: this.prodGroupBasicObj.period_use_day, // 周期
            // cash: this.prodGroupBasicObj.cash, // 押金
            property_id: this.prodGroupBasicObj.property_id, // 分类
            pattern: this.prodGroupBasicObj.pattern, // 规格类型
             template_norms_id: this.prodGroupBasicObj.template_norms_id, // 规格模板id
            coverImage: this.prodGroupBasicObj.cover_image_file_name, // 封面
             is_home:this.prodGroupBasicObj.is_home, //是否首页展示
             is_hot:this.prodGroupBasicObj.is_hot, //是否首页展示
            sorter:this.prodGroupBasicObj.sorter, //排序
              store_id :this.prodGroupBasicObj.store_id,
             // fit_member:this.prodGroupBasicObj.fit_member,
            // course_time:this.prodGroupBasicObj.course_time,
            // sale_start_at:this.prodGroupBasicObj.sale_start_at,
            // sale_expire_at:this.prodGroupBasicObj.sale_expire_at,
            business_id:this.prodGroupBasicObj.business_id,
            // course_property_id:this.prodGroupBasicObj.course_property_id,
            // organ_id:this.prodGroupBasicObj.organ_id,
            remark:this.prodGroupBasicObj.remark,

            sale_estate:this.prodGroupBasicObj.sale_estate,
            temp_id:this.prodGroupBasicObj.temp_id,
            label_id:this.prodGroupBasicObj.label_id,
          }
          let expandObj = {
            seo_title: this.prodGroupSeoObj.seo_title, //
             template_norms_id: this.prodGroupBasicObj.template_norms_id, // 规格模板id
            seo_keyword: this.prodGroupSeoObj.seo_keyword, //
            seo_description: this.prodGroupSeoObj.seo_description, //
            seo_tag: this.prodGroupSeoObj.seo_tag, //
            description: this.prodGroupGoodsDetailObj, // 宝贝详情  <p>二问题</p>
            rent_procedure: this.prodGroupRentStepObj, // 租赁流程
            parameters: this.prodGroupRentNeedKnowObj, // 租赁须知

            video_url: this.prodGroupBasicObj.video_name, // 视频
            is_cloudhouse:this.prodGroupBasicObj.is_cloudhouse,
          }
          let normsValueObj = {
            cover_image: '', // 相片
            src: '', // 图片完整链接
            price: '', // 价格
            number: '', // 库存
            cost: '', // 成本
            sale_count: '', // 销量
            norms_ids: '', // 规格ids
            name: '' ,// 规格名称
            num:'',
          }

          let obj = {
            // 新增待定
            basic: basicObj, // obj

            expand: expandObj,
            album_image: this.prodGroupBasicObj.album_imageArr.length ? this.prodGroupBasicObj.album_imageArr.map(
              res => {
                return res.file_name
              }) : [], // 相册 obj
            normsValue: this.prodGroupBasicObj.pattern == 0 ? this.prodGroupBasicObj.normsValueSingle : this.prodGroupBasicObj.normsValue // 单规格

            // isStoreManager:_this.formValidate.isStoreManager, //??
          }
          // 修改接口
          put(obj).then(res => {
            if (res.data.status == 1) {
              // let result=res.data.data;
              // _this.data.list=result;
              _this.$Message.success('操作成功')
              _this.isbodyList = true
              _this.getList() // 重新刷新数据
            } else {
              // axios响应拦截
            }
          }).catch(function(error) {
            // 异常
            console.log(error)
          })
        }

        // this.$Message.success('Success!');
      },
      handleReset(name) {
        this.$refs[name].resetFields()
      },
      // 赔付
      pay() {
        this.payModal = true
      },
      // 结算
      account() {
        this.accountModal = true
      },
      exportExcel() {
        this.$refs.tables.exportCsv({
          filename: `table-${(new Date()).valueOf()}.csv`
        })
      },
      change(status) {
        this.$Message.info('开关状态：' + status)
      }
    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
